<%--
  Created by IntelliJ IDEA.
  User: mona
  Date: 2020/5/30
  Time: 19:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>车轮制动管理</title>
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" href="../element-ui/element.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/cln/css/engine.css">
</head>
<body>
<script src="../../vue/vue.js"></script>
<script src="../../vue/vue.min.js"></script>
<script src="../element-ui/element.js"></script>
<script src="../../jquery/jquery-3.4.1.js"></script>
<div id="app">
    <template>
        <el-row :gutter="24">
            <el-col :span="22" :offset="1">
                <div class="pro">
                    <%--
                        :header-cell-style="thStyleFun"  表头样式
                        :cell-style="cellStyleFun"  每一个单元格样式
                     --%>
                    <el-table :data="list" style="width: 100%;margin: 0 auto;" :header-cell-style="thStyleFun"
                              :cell-style="cellStyleFun">
                        <el-table-column label="车轮制动编号" prop="wheelId"></el-table-column>
                        <el-table-column label="前制动器类型" prop="frontbrake"></el-table-column>
                        <el-table-column label="后制动器类型" prop="rearbrak"></el-table-column>
                        <el-table-column label="驻车制动类型" prop="parkingtype"></el-table-column>
                        <el-table-column label="前轮胎规格" prop="fronttire"></el-table-column>
                        <el-table-column label="后轮胎规格" prop="reartire"></el-table-column>
                        <el-table-column label="备胎" prop="sparetire"></el-table-column>
                        <el-table-column align="right">
                            <template slot="header" slot-scope="scope">
                                <el-button @click="dialogFormVisible = true">添加车轮制动</el-button>
                            </template>
                            <template slot-scope="scope">
                                <el-row :gutter="24">
                                    <el-col :span="12">
                                        <el-button size="mini" @click="showWheel(scope.row)">Edit</el-button>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-button size="mini" type="danger" @click="deleteWheel(scope.$index, scope.row)">
                                            Delete
                                        </el-button>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--分页-->
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="pageNum"
                                :page-size="pageSize"
                                :pager-count="4"
                                layout="prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                    <!--添加车轮制动弹框-->
                    <el-dialog title="添加车轮制动" :visible.sync="dialogFormVisible" width="30%">
                        <el-form :model="{form}">
                            <el-form-item label="前制动器类型" :label-width="formLabelWidth">
                                <el-input v-model="form.frontbrake"></el-input>
                            </el-form-item>
                            <el-form-item label="后制动器类型" :label-width="formLabelWidth">
                                <el-input v-model="form.rearbrak" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="驻车制动类型" :label-width="formLabelWidth">
                                <el-input v-model="form.parkingtype" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="前轮胎规格" :label-width="formLabelWidth">
                                <el-input v-model="form.fronttire" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="后轮胎规格" :label-width="formLabelWidth">
                                <el-input v-model="form.reartire" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="备胎" :label-width="formLabelWidth">
                                <el-input v-model="form.sparetire" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="onSubmit">确 定</el-button>
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                        </div>
                    </el-dialog>

                    <!--修改车轮制动弹框-->
                    <!--:model需要的是object型，若model报错，可以加个{}-->
                    <el-dialog title="修改车轮制动" :visible.sync="dialogFormVisible1" width="30%">
                        <el-form :model="{getlist}">
                            <el-form-item label="前制动器类型" :label-width="formLabelWidth">
                                <el-input v-model="getlist.frontbrake"></el-input>
                            </el-form-item>
                            <el-form-item label="后制动器类型" :label-width="formLabelWidth">
                                <el-input v-model="getlist.rearbrak"></el-input>
                            </el-form-item>
                            <el-form-item label="驻车制动类型" :label-width="formLabelWidth">
                                <el-input v-model="getlist.parkingtype"></el-input>
                            </el-form-item>
                            <el-form-item label="前轮胎规格" :label-width="formLabelWidth">
                                <el-input v-model="getlist.fronttire"></el-input>
                            </el-form-item>
                            <el-form-item label="后轮胎规格" :label-width="formLabelWidth">
                                <el-input v-model="getlist.reartire"></el-input>
                            </el-form-item>
                            <el-form-item label="备胎" :label-width="formLabelWidth">
                                <el-input v-model="getlist.sparetire"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="editWheel">确 定</el-button>
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
    </template>
</div>
</body>
<script>
    var Main = {
        data() {
            return {
                list: [],
                getlist: [],
                search: '',
                dialogFormVisible: false,
                dialogFormVisible1: false,
                form: {},
                formLabelWidth: '120px',
                total: 1,//总条数  默认值不能为空
                pageSize: 6,//每页显示几条数据
                pageNum: 1,//当前页
                pages: 1,//总页数
                startRow: '',//起始页
                endRow: '',//结束页
                fileList: [],//上传文件列表
                formdata: new FormData(),
                wheelId: ''
            }
        },
        created() {
            this.getWheel();
        },
        methods: {
            // 获取
            getWheel() {
                var _this = this;
                $.ajax({
                    type: 'get',
                    url: '/forum/wheel/selectAllWheel',
                    dataType: 'json',
                    data: "pageNum=" + this.pageNum + "&pageSize=" + this.pageSize,
                    success: function (data) {
                        console.log(data.data);
                        if (data.state === '200') {
                            _this.list = data.data.list;
                            _this.getlist = data.data.list;
                            _this.pageNum = data.data.pageNum;//当前页码
                            _this.total = data.data.total;//总条数
                            _this.pages = data.data.pages;//总页数
                        }
                    }
                })
            },
            thStyleFun() {
                return 'text-align:center'
            },
            cellStyleFun() {
                return 'text-align:center'
            },

            //删除
            deleteWheel(index, row) {
                var that = this;
                console.log(index, row);
                $.ajax({
                    method: 'post',
                    url: '/forum/wheel/deleteWheel',
                    data: {
                        wheelId: row.wheelId,
                    },
                    success: function (data) {
                        if (data.state === '200') {
                            console.log(data);
                            that.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            window.location.reload();
                        } else {
                            that.$message.error('删除失败');
                        }
                    }
                })
            },
            //element行点击方法  获取该行数据
            showWheel(row) {
                var _this = this;
                _this.dialogFormVisible1 = true;
                _this.wheelId = row.wheelId;
                console.log(_this.wheelId);
                _this.getlist = row;
            },
            //添加 （表单提交）
            onSubmit() {
                var _this = this;
                _this.dialogFormVisible = false;
                console.log("表单提交了！", _this.form);
                _this.addWheel();
            },
            //添加
            addWheel() {
                var _this = this;
                $.ajax({
                    method: 'post',
                    url: '/forum/wheel/insertWheel',
                    data: {
                        wheelId: _this.wheelId,
                        frontbrake: _this.form.frontbrake,
                        rearbrak: _this.form.rearbrak,
                        parkingtype: _this.form.parkingtype,
                        fronttire: _this.form.fronttire,
                        reartire: _this.form.reartire,
                        sparetire: _this.form.sparetire
                    },
                    success: function (data) {
                        // console.log(data)
                        if (data.state === '200') {
                            _this.dialogFormVisible = false;
                            _this.$message({
                                message: "添加成功",
                                type: "success"
                            });
                            window.location.reload();
                        } else {
                            _this.$message.error('添加失败');
                        }
                    }
                })
            },
            //修改
            editWheel() {
                var that = this;
                $.ajax({
                    method: 'post',
                    url: '/forum/wheel/updateWheel',
                    data: {
                        wheelId: that.wheelId,
                        frontbrake: that.getlist.frontbrake,
                        rearbrak: that.getlist.rearbrak,
                        parkingtype: that.getlist.parkingtype,
                        fronttire: that.getlist.fronttire,
                        reartire: that.getlist.reartire,
                        sparetire: that.getlist.sparetire
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.state === '200') {
                            that.dialogFormVisible1 = false;
                            that.$message({
                                message: "修改成功",
                                type: "success"
                            });
                        } else {
                            that.$message.error('修改失败');
                        }
                    }
                })
            },
            //每页显示几条
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.getWheel()
            },
            //当前页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getWheel()
            }
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount("#app");
</script>
</html>
